【CSS】flex-direction - フレックスコンテナーの主軸方向

CSSのflex-directionプロパティについて解説します。

検証環境

CSS

macOS

14.1

flex-direction

flex-directionは“フレックスコンテナーの主軸方向”のプロパティです。

基本構文

flow-direction: 値;

値

代表的な値は次の通りです。

値	意味
row	書字方向
row-reverse	rowの逆
column	ブロック軸
column	ブロック軸の逆

サンプル

row

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-direction: row;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー

row-reverse

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-direction: row-reverse;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー

column

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-direction: column;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー

column-reverse

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-direction: column-reverse;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー